<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>let与var的区别</title>
    <script>
        function f1(){
            // var中没有作用域的概念
            for(var i = 0; i < 10; i++){}
            console.log(i);  // 10

            // let存在作用域的概念
            // let的用法与java变量的行为特点基本一致
            for(let j = 0; j < 10; j++){}
            console.log(j); // 报错,j is not defined
        }
        function f2(){
            // var中变量名可以重复
            var name = "admin";
            console.log(name);
            var name = "alice";
            console.log(name);

            // let中变量名不能重复
            let num = 1;
            console.log(num);
            // let num = 2; // 报错
        }

        function f3(){
            // var存在变量提升
            // console.log(name)
            // var name = "admin";
            // 使用var定义的变量存在变量提升
            // 变量提升:将变量的声明提升到函数的最先位置
            // 上述代码相当于下面的写法
            var name;
            console.log(name);
            name = "admin";

            // 而let不存在变量提升
            // 此时报错,can't access lexical declaration 'num' before initialization
            // 在打印num的时候,我们尚未声明num,会报错
            console.log(num);
            let num = 1;
        }
    </script>
</head>
<body>
<button onclick="f1()">作用域区别</button><br>
<button onclick="f2()">变量名区别</button><br>
<button onclick="f3()">变量提升区别</button><br>
</body>
</html>